
// 画笔大小
let brush_size = 10
// 最大画笔大小
let max_size = 50
// 加减的步数
let step_num = 5

let brush_color_btn = document.querySelector('.brush_color')

let brush_size_input = document.querySelector('.brush_size')

brush_size_input.value = brush_size


brush_size_input.addEventListener('input',brushSizeChange)


let minus_btn = document.querySelector('.minus')


minus_btn.addEventListener('click',function(){
  brush_size_input.value = Number(brush_size_input.value) - step_num
  brushSizeChange()
})

let plus_btn = document.querySelector('.plus')

plus_btn.addEventListener('click',function(){
  brush_size_input.value = Number(brush_size_input.value) + step_num
  brushSizeChange()
})

// 画笔大小变换
function brushSizeChange(){
  let value = brush_size_input.value
  if(value > max_size){
    brush_size_input.value = max_size
  }
  if (value < 1) {
    brush_size_input.value = 1
  }

  brush_size = brush_size_input.value
}

let canvas = document.getElementById('board')

let ctx = canvas.getContext('2d')
// 鼠标是否按下
let isPressed = false
let x,y

// 鼠标在画布下按下
canvas.addEventListener('mousedown',function(e){
  isPressed = true
  x = e.offsetX
  y = e.offsetY
})

// 鼠标松开
document.addEventListener('mouseup',function(){
  isPressed = false
  x = undefined
  y = undefined
})

// 鼠标移动
canvas.addEventListener('mousemove',function(e){
  if(isPressed){
    let x2 = e.offsetX
    let y2 = e.offsetY
    drawCircle(x2,y2)
    drawLine(x,y,x2,y2)
    x = x2
    y = y2
  }
})

// 画圆
function drawCircle(x,y){
  ctx.beginPath()
  ctx.arc(x, y, brush_size,0,Math.PI * 2)
  ctx.fillStyle = brush_color_btn.value
  ctx.fill()
}

// 画线条
function drawLine(x1,y1,x2,y2){
  ctx.beginPath()
  ctx.moveTo(x1,y1)
  ctx.lineTo(x2,y2)
  ctx.strokeStyle = brush_color_btn.value
  ctx.lineWidth = brush_size * 2
  ctx.stroke()
}


// 清空画布
document.querySelector('.util_right').addEventListener('click',()=>ctx.clearRect(0,0,canvas.width,canvas.height))